<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>新锐官方商城 - 用户后台</title>
  <script src="lib/jquery-3.5.1.min.js"></script>
  <script src="lib/qrcodejs/qrcode.min.js"></script>
  <link rel="stylesheet" href="lib/layui/css/layui.css">
  <link rel="stylesheet" href="css/home.css">
  <link rel="stylesheet" href="lib/font-awesome/css/font-awesome.min.css">
</head>
<body>
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo">新锐官方商城</div>
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item">
        <a href="javascript:;">
          <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img">
          xziying
        </a>
        <dl class="layui-nav-child">
          <dd><a href="">个人信息</a></dd>
          <dd><a href="">我的钱包</a></dd>
          <dd><a href="">我的积分</a></dd>
        </dl>
      </li>
      <li class="layui-nav-item"><a href="">退出登录</a></li>
    </ul>
  </div>
  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <div title="菜单缩放" class="kit-side-fold"><i class="fa fa-navicon" aria-hidden="true"></i></div>
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <div id="navigation" class="layui-side-scroll">
        <ul class="layui-nav layui-nav-tree"  lay-filter="test">
          <li class="layui-nav-item layui-nav-itemed">
            <a class=""><i class="fa fa-briefcase fa-lg" aria-hidden="true"></i></i> <span>业务中心</span></a>
            <dl class="layui-nav-child">
              <dd><a @click="select(0)" class="layui-this"><i class="fa fa-home fa-lg" aria-hidden="true"></i> <span>首页</span></a></dd>
              <dd><a @click="select(1)"><i class="fa fa-window-restore fl-lg" aria-hidden="true"></i> <span>插件商城</span></a></dd>
              <dd><a @click="select(2)"><i class="fa fa-briefcase fa-lg" aria-hidden="true"></i> <span>已购插件</span></a></dd>
              <dd><a @click="select(3)"><i class="fa fa-gift fa-lg" aria-hidden="true"></i> <span>我的返利</span></a></dd>
            </dl>
          </li>
          <li class="layui-nav-item layui-nav-itemed">
            <a><i class="fa fa-bullseye fa-lg" aria-hidden="true"></i> <span>交易中心</span></a>
            <dl class="layui-nav-child">
              <dd><a @click="select(4)"><i class="fa fa-rmb fa-lg" aria-hidden="true"></i> <span>余额充值</span></a></dd>
              <dd><a @click="select(5)"><i class="fa fa-calendar-minus-o fa-lg" aria-hidden="true"></i> <span>我的订单</span></a></dd>
              <dd><a @click="select(6)"><i class="fa fa-user-circle fa-lg" aria-hidden="true"></i> <span>个人中心</span></a></dd>
            </dl>
          </li>
          <li class="layui-nav-item"><a ><span>保留操作</span></a></li>
          <li class="layui-nav-item"><a ><span>保留操作</span></a></li>
        </ul>
      </div>
    </div>
  </div>


  <div class="layui-body content-body">
    <!-- 内容主体区域 -->
    <div style="padding: 15px;">
        <!-- 首页 -->
        <div id="homePage" v-show="show.index===0">
          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>首页</legend>
          </fieldset>

          <!--资源数-->
          <div class="layui-card">
            <div class="layui-card-body">
              <ul class="layui-row layui-col-space10 layui-this">
                <li class="layui-col-xs3">
                  <a class="panel-backlog-body">
                    <h3>我的余额<i class="layui-icon layui-icon-rmb"></i></h3>
                    <p><cite>{{wallet.balance}}元</cite></p>
                  </a>
                </li>
                <li class="layui-col-xs3">
                  <a class="panel-backlog-body">
                    <h3>我的积分<i class="layui-icon layui-icon-star"></i></h3>
                    <p><cite>{{wallet.integral}}分</cite></p>
                  </a>
                </li>
                <li class="layui-col-xs3">
                  <a class="panel-backlog-body">
                    <h3>我的消费<i class="layui-icon layui-icon-gift"></i></h3>
                    <p><cite>{{wallet.consume}}元</cite></p>
                  </a>
                </li>
                <li class="layui-col-xs3">
                  <a class="panel-backlog-body">
                    <h3>购买插件<i class="layui-icon layui-icon-template-1"></i></h3>
                    <p><cite>0个</cite></p>
                  </a>
                </li>
                </li>
              </ul>
            </div>
          </div>

          <!--公告面板-->
          <div class="layui-card">
            <div class="layui-card-header layui-bg-green">公告信息</div>
            <div class="layui-card-body">
              <blockquote class="layui-elem-quote">
                华景新锐官方商城 目前已全新升级，界面和功能都进行了改进.<br>
                支付宝 新支持手机支付、微信支持公众号内支付！<br>
                如果您对 新版商城有任何疑问，欢迎联系我司客服QQ：5474633 或 84915429.<br>
              </blockquote>
              <blockquote class="layui-elem-quote layui-quote-nm">
                <span class="text">1、快速充值账户<button class="layui-btn layui-btn-xs layui-btn-normal">充值</button>
                  ，点击<button class="layui-btn layui-btn-xs layui-btn-normal">购买插件</button>进入插件商城购买</span>
              </blockquote>
              <blockquote class="layui-elem-quote layui-quote-nm">
                <span class="text">2、如果你在使用中碰到任何问题，请点击右边的联系在线客服咨询。</span>
              </blockquote>
            </div>
          </div>

          <!--专属分享-->
          <div class="layui-card">
            <div class="layui-card-header layui-bg-green">我的专属分享</div>
            <div class="layui-card-body">
              <blockquote class="layui-elem-quote layui-quote-nm">
                <span class="li-icon"><i class="layui-icon layui-icon-link"></i></span>
                <span class="text">我的专属连接：暂未开放</span>
              </blockquote>
              <blockquote class="layui-elem-quote layui-quote-nm">
                <span class="li-icon"><i class="layui-icon layui-icon-email"></i></span>
                <span class="text">绑定邮箱：暂未开放</span>
              </blockquote>
              <blockquote class="layui-elem-quote layui-quote-nm">
                <span class="li-icon"><i class="layui-icon layui-icon-diamond"></i></span>
                <span class="text">会员等级：暂未开放</span>
              </blockquote>
            </div>
          </div>
        </div>

        <!-- 插件商城 -->
        <div id="pluginMall" v-show="show.index===1">
          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>插件商城</legend>
          </fieldset>
          <div class="plugIn-box">
            <div class="plugIn-info" >
              <img src="../images/shunxu.jpg" alt="">
              <div class="plugIn-info-name"><b>顺序回复</b></div>
              <div class="plugIn-info-operating">
                <button class="layui-btn layui-btn-normal"><i class="layui-icon layui-icon-cart"></i> 购买</button>
                <button class="layui-btn layui-btn-xs layui-bg-red"><i class="layui-icon layui-icon-praise"></i> 赞</button>
                <button class="layui-btn layui-btn-xs layui-bg-cyan"><i class="layui-icon layui-icon-tread"></i> 踩</button>
              </div>
            </div>
            <div class="plugIn-info" >
              <img src="../images/caiji.jpg" alt="">
              <div class="plugIn-info-name"><b style="color: #FF5722">采集转发<i class="layui-icon layui-icon-fire"></i></b></div>
              <div class="plugIn-info-operating">
                <button class="layui-btn layui-btn-normal"><i class="layui-icon layui-icon-cart"></i> 购买</button>
                <button class="layui-btn layui-btn-xs layui-bg-red"><i class="layui-icon layui-icon-praise"></i> 赞</button>
                <button class="layui-btn layui-btn-xs layui-bg-cyan"><i class="layui-icon layui-icon-tread"></i> 踩</button>
              </div>
            </div>
            <div class="plugIn-info" >
              <img src="../images/tuisong.jpg" alt="">
              <div class="plugIn-info-name"><b>超级推送</b></div>
              <div class="plugIn-info-operating">
                <button class="layui-btn layui-btn-normal"><i class="layui-icon layui-icon-cart"></i> 购买</button>
                <button class="layui-btn layui-btn-xs layui-bg-red"><i class="layui-icon layui-icon-praise"></i> 赞</button>
                <button class="layui-btn layui-btn-xs layui-bg-cyan"><i class="layui-icon layui-icon-tread"></i> 踩</button>
              </div>
            </div>
            <div class="plugIn-info" >
              <img src="../images/tuiqun.jpg" alt="">
              <div class="plugIn-info-name"><b>自动退群</b></div>
              <div class="plugIn-info-operating">
                <button class="layui-btn layui-btn-normal"><i class="layui-icon layui-icon-cart"></i> 购买</button>
                <button class="layui-btn layui-btn-xs layui-bg-red"><i class="layui-icon layui-icon-praise"></i> 赞</button>
                <button class="layui-btn layui-btn-xs layui-bg-cyan"><i class="layui-icon layui-icon-tread"></i> 踩</button>
              </div>
            </div>
          </div>
        </div>

        <!-- 已购插件 -->
        <div id="purchasedPlugIns" v-show="show.index===2">
          已购插件
        </div>

        <!-- 我的返利 -->
        <div id="myRebate" v-show="show.index===3">
          我的返利
        </div>

        <!-- 余额充值 -->
        <div id="rechargeYourBalance" v-show="show.index===4">
          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>余额充值</legend>
          </fieldset>

          <!--资源数-->
          <div class="layui-card">
            <div class="layui-card-body">
              <ul class="layui-row layui-col-space10 layui-this">
                <li class="layui-col-xs3">
                  <a class="panel-backlog-body">
                    <h3>我的余额<i class="layui-icon layui-icon-rmb"></i></h3>
                    <p><cite>{{wallet.balance}}元</cite></p>
                  </a>
                </li>
                <li class="layui-col-xs3">
                  <a class="panel-backlog-body">
                    <h3>我的积分<i class="layui-icon layui-icon-star"></i></h3>
                    <p><cite>{{wallet.integral}}分</cite></p>
                  </a>
                </li>
                <li class="layui-col-xs3">
                  <a class="panel-backlog-body">
                    <h3>我的消费<i class="layui-icon layui-icon-gift"></i></h3>
                    <p><cite>{{wallet.consume}}元</cite></p>
                  </a>
                </li>
                <li class="layui-col-xs3">
                  <a class="panel-backlog-body">
                    <h3>购买插件<i class="layui-icon layui-icon-template-1"></i></h3>
                    <p><cite>0个</cite></p>
                  </a>
                </li>
                </li>
              </ul>
            </div>
          </div>

          <div class="layui-card">
            <div class="layui-card-header layui-bg-green">余额充值</div>
            <div class="layui-card-body">

              <form class="layui-form" action="">
                <div class="layui-form-item">
                  <div class="layui-inline">
                    <label class="layui-form-label">充值余额</label>
                    <div class="layui-input-inline" style="width: 100px;">
                      <input id="price_min" type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
                    </div>
                  </div>
                </div>

                <div class="layui-form-item">
                  <label class="layui-form-label">支付方式</label>
                  <div id="pay-type" class="layui-input-block">
                    <input type="radio" value="0" name="pay" title="支付宝" checked>
                    <input type="radio" value="1" name="pay" title="微信">
                  </div>
                </div>

                <div class="layui-form-item">
                  <div class="layui-input-block">
                    <button type="button" class="layui-btn" @click="recharge()">立即充值</button>
                  </div>
                </div>
              </form>
            </div>
          </div>


          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>流水记录</legend>
          </fieldset>

          <!-- 分页 -->
          <div>

          </div>
          <!-- 流水记录 -->
          <div>
              <table class="layui-table" lay-size="sm">

                <thead>
                <tr>
                  <th>订单号</th>
                  <th>支付方式</th>
                  <th>支付余额</th>
                  <th>创建时间</th>
                  <th>订单状态</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="bill in bills">
                  <td>{{bill.orderid}}</td>
                  <td>{{bill.type_str}}</td>
                  <td>{{bill.amount_str}}</td>
                  <td>{{bill.time_str}}</td>
                  <td v-if="bill.status===0">{{bill.status_str}}</td>
                  <td v-else-if="bill.status===1" style="color: #5FB878">{{bill.status_str}}</td>
                  <td v-else style="color: #FF5722">{{bill.status_str}}</td>
                </tr>
                </tbody>
              </table>
            </div>


        </div>

        <!-- 我的订单 -->
        <div id="myOrder" v-show="show.index===5">
          我的订单
        </div>

        <!-- 个人中心 -->
        <div id="personalCenter" v-show="show.index===6">
          个人中心
        </div>
    </div>
  </div>

  <div class="layui-footer">
    <!-- 底部固定区域 -->
    <b> © 2020-2024 新锐网络公司版权所有</b>
  </div>
</div>

<script src="lib/layui/layui.js"></script>
<script src="lib/vue.js"></script>
<script src="js/home.js"></script>

<script>
  //JavaScript代码区域
  layui.use('element', function(){
    var element = layui.element;

  });
  var isShow = true;  //定义一个标志位
  $('.kit-side-fold').click(function(){
    //选择出所有的span，并判断是不是hidden
    $('.layui-nav-item span').each(function(){
      if($(this).is(':hidden')){
        $(this).show();
      }else{
        $(this).hide();
      }
    });
    //判断isshow的状态
    if(isShow){
      $('.layui-side.layui-bg-black').width(60); //设置宽度
      $('.kit-side-fold i').css('margin-right', '70%');  //修改图标的位置
      //将footer和body的宽度修改
      $('.layui-body').css('left', 60+'px');
      $('.layui-footer').css('left', 60+'px');
      //将二级导航栏隐藏
      $('dd span').each(function(){
        $(this).hide();
      });
      //修改标志位
      isShow =false;
    }else{
      $('.layui-side.layui-bg-black').width(200);
      $('.kit-side-fold i').css('margin-right', '10%');
      $('.layui-body').css('left', 200+'px');
      $('.layui-footer').css('left', 200+'px');
      $('dd span').each(function(){
        $(this).show();
      });
      isShow =true;
    }
  });

</script>

</body>
</html>